// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Radio, Button,Popconfirm, Modal, Row, Col, Input, Select, Cascader, Icon, Checkbox, Tabs, DatePicker, message } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './teamMannageAddStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import moment from 'moment';

const FormItem = Form.Item
const { RangePicker } = DatePicker
const { Option } = Select;
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const teamMannageAddView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue,validateFieldsAndScroll  } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let { userList,teamLeaderList,query, actionType, btnLoading,products,areaList } = modelObj

  const formItemLayoutPro = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  const formItemLayoutForTime = {
    labelCol: { span: 2 },
    wrapperCol: { span: 20 },
  };

  function goback(){
    hashHistory.push({
      pathname: '/home/expandManage/teamMannage',
      query: {}
    });
  }
      //区域改变时
  function inputAreaChange(value, name) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {
        query: {
          ...query,
          [name]: value,
        }
      }
    })
    filterProjectList(value)
  }
  //过滤项目数据
  function filterProjectList(areaId){
    products = []
    let list = []
    for(var item of areaList){
      if(item.value == areaId){
        list = item.children
      }
    }
    if(list.length){
      products =  list.map((item,index)=>{
        return {
          label: item.buname,
          value: item.buguid,
        }
      })
    }
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {products}
    })
  }
  //输入框改变时
  function inputChange(e, name) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {
        query: {
          ...query,
          [name]: e,
        }
      }
    })
  }
  //项目改变时
  function projectChange(e, name) {
    dispatch({
      type: `${namespace}/updateStore`,
      payload: {
        query: {
          ...query,
          [name]: e,
        }
      }
    })
    dispatch({
      type: `${namespace}/searchLeadUserByProject`,
      payload: {orgGuid:e}
    })
    dispatch({
      type: `${namespace}/searchUserByProject`,
      payload: {orgGuid:e}
    })
  }

  function submit(){
    validateFieldsAndScroll((err) => {
      if (err) {
        return false
      } else {
        dispatch({
          type: `${namespace}/submit`,
          payload: {}
        })
      }
    })
  }
  return (
    <div className='public_listMain'>
      <div className={"functionButton"}>
        <Button type='primary' onClick={e => submit()} loading={btnLoading}>保存</Button>
        <Popconfirm placement="top" title={"是否确认关闭，确认后关闭页面，不保存数据。"} onConfirm={() => goback()} okText="确定" cancelText="取消">
          <Button>关闭</Button>
        </Popconfirm>
      </div>

      <CollapsiblePanels title="团队详情" hideUpDownBtn={true} >
      <Row>
          <Col span={8}>
            <FormItem label='团队名称'  {...formItemLayoutPro}>
              {getFieldDecorator('teamName', {
                rules: [{
                  required: true, whitespace: true, message: '请选择团队名称'
                }],
                initialValue: query.teamName
              })(
                <Input  onChange={(e) => { inputChange(e.target.value, 'teamName') }} />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='区域'  {...formItemLayoutPro}>
              {getFieldDecorator('areaId', {
                rules: [{
                  required: true, whitespace: true, message: '请选择区域'
                }],
                initialValue: query.areaId
              })(
                <Select disabled={actionType == 'detail'} placeholder='请选择区域' onChange={(e) => { inputAreaChange(e, 'areaId') }}>
                   {areaList.map((item)=>{
                      return <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                    })}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='项目'  {...formItemLayoutPro}>
              {getFieldDecorator('orgGuid', {
                rules: [{
                  required: true, whitespace: true, message: '请选择项目'
                }],
                initialValue: query.orgGuid
              })(
                <Select disabled={actionType == 'detail'} placeholder='请选择项目' onChange={(e) => { projectChange(e, 'orgGuid') }}>
                    {products.map((item)=>{
                        return <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                      })}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label='团队类型'  {...formItemLayoutPro}>
              {getFieldDecorator('teamType', {
                rules: [{
                  required: true, whitespace: true, message: '请选择团队类型'
                }],
                initialValue: query.teamType
              })(
                <Select disabled={actionType == 'detail'} placeholder='请选择团队类型' onChange={(e) => { inputChange(e, 'teamType') }}>
                  <Select.Option value="0">销售团队</Select.Option>
                  <Select.Option value="1">自渠团队</Select.Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row style={{display: query.teamType==1?'block':'none',}}>
          <Col span={8}>
            <FormItem label='团队管理员'  {...formItemLayoutPro}>
              {getFieldDecorator('teamLeader', {
                rules: [{
                  required: query.teamType==1?true:false, whitespace: true, message: '请选择团队管理员'
                }],
                initialValue: query.teamLeader
              })(
                <Select disabled={actionType == 'detail'} placeholder='请选择团队管理员' onChange={(e) => { inputChange(e, 'teamLeader') }}>
                  {teamLeaderList.map((item)=>{
                      return <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                    })}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem {...formItemLayoutPro}
              label="添加成员">
              {getFieldDecorator('userList', {
                initialValue: query.userList || [],
                rules: [
                  { required: false,  message: '请选择' },
                ],
              })(<Select
                mode="multiple"
                size='default'
                notFoundContent='没有此成员'
                placeholder="请选择成员"
                onChange={(e, v) => {
                  let arr = []
                  v.map((item, idx) => {
                    arr.push(item.props.value)
                  })
                  inputChange(arr, 'userList')
                }}
                style={{ width: '100%' }}
              >
                {userList && userList.map((item, idx) => {
                  return (
                    item?
                    <Select.Option key={idx+''} value={item.value}>{item.label}</Select.Option>:null
                  )
                })}
              </Select>)}
            </FormItem>
          </Col>
        </Row>
      </CollapsiblePanels>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(teamMannageAddView))